<script setup lang="ts">
import { shallowReactive } from "vue";
const state = shallowReactive({});
</script>
<template>
  <div class="arrow-button" :style="{}"></div>
</template>
<style lang="less">
.arrow-button {
  --width: 180px;
  --height: 64px;
  --color: #f49714;
  --dheight: calc(var(--height) / 2);

  position: relative;
  width: var(--width);
  height: var(--height);
  background: var(--color);

  &::after {
    content: "";
    position: absolute;
    width: var(--dheight);
    height: var(--height);
    top: 0;
    right: calc(-1 * var(--dheight));
    background: linear-gradient(
        -45deg,
        transparent 0,
        transparent 22px,
        var(--color) 22px,
        var(--color) 100%
      ),
      linear-gradient(
        -135deg,
        transparent 0,
        transparent 22px,
        var(--color) 22px,
        var(--color) 100%
      );
    background-size: var(--dheight) var(--dheight);
    background-repeat: no-repeat;
    background-position: 0 bottom, 0 top;
  }
}
</style>
